<div class="page page-form-wizard clearfix">


    <ol class="breadcrumb breadcrumb-small">
        <li>Forms</li>
        <li class="active"><a href="#/forms/form-wizard">Form Wizard</a>
        </li>
    </ol>

    <div class="page-wrap">
        <div class="row">
            <div class="col-lg-12">
                <!-- Form wizard -->
                <div class="panel panel-lined mb30" ng-controller="FormWizardCtrl">
                    <div class="panel-body">
                        <ul class="list-unstyled wizard-tabs mb30">
                            <li ng-class="{active: steps[0]}">
                                <span class="text">Account Info</span>
                                <i class="fa fa-long-arrow-right"></i>
                            </li>
                            <li ng-class="{active: steps[1]}">
                                <span class="text">Notifications</span>
                                <i class="fa fa-long-arrow-right"></i>
                            </li>
                            <li ng-class="{active: steps[2]}">
                                <span class="text">Finish</span>
                            </li>
                        </ul>
                        <hr class="dashed mb30" />

                        <!-- step 1 -->
                        <form class="form-horizontal col-lg-10" name="wizard-step-1" ng-show="steps[0]">
                            <div class="form-group">
                                <label class="col-lg-4 control-label">Username</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" ng-minlength="4" placeholder="Must be atleast 4 chars long">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-4 control-label">Email</label>
                                <div class="col-lg-8">
                                    <input type="email" class="form-control" placeholder="john@doe.com">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-4 control-label">Password</label>
                                <div class="col-lg-8">
                                    <input type="password" class="form-control" ng-minlength="6" placeholder="Atleast 6 chars long">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-4 control-label">Verify Password</label>
                                <div class="col-lg-8">
                                    <input type="password" class="form-control" ng-minlength="6" placeholder="Atleast 6 chars long">
                                </div>
                            </div>
                            <div class="clearfix">
                                <button type="submit" class="btn btn-primary right" ng-click="stepNext(1)">Next</button>
                            </div>
                        </form>
                        <!-- #end step 1 -->


                        <!-- step 2 -->
                        <form class="form-horizontal col-lg-10" name="wizard-step-2" ng-show="steps[1]">
                            <div class="form-group">
                                <div class="col-lg-10 col-lg-offset-2">
                                    <div class="left">
                                        <h4 class="small text-uppercase">Subscribe For Newsletter</h4>
                                        <p>This option allows you to recieve updates from our site.</p>
                                    </div>
                                    <div class="right mt15">
                                        <div class="ui-toggle ui-toggle-sm ui-toggle-success">
                                            <label>
                                                <input type="checkbox">
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-lg-10 col-lg-offset-2">
                                    <div class="left">
                                        <h4 class="small text-uppercase">Anonymous Activity</h4>
                                        <p>This option allows you to recieve message whenever something happens.</p>
                                    </div>
                                    <div class="right mt15">
                                        <div class="ui-toggle ui-toggle-sm ui-toggle-success">
                                            <label>
                                                <input type="checkbox" checked>
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="clearfix right">
                                <button type="button" class="btn btn-primary mr5" ng-click="stepNext(0)">Previous</button>
                                <button type="submit" class="btn btn-primary" ng-click="stepNext(2)">Next</button>
                            </div>
                        </form>
                        <!-- #end step 2 -->



                        <!-- step 3 -->
                        <div class="wizard-complete-msg text-center col-lg-8 col-lg-offset-2" ng-show="steps[2]">
                            <h3 class="text-light">Congrats, you are now a member of our site.</h3>
                            <p> Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae</p>
                            <button type="button" class="btn btn-primary" ng-click="stepReset()">Start Over</button>
                        </div>
                        <!-- #end step 3 -->


                    </div>
                </div>
                <!-- #end form wizard -->
            </div>
        </div>
        <!-- #end row -->
    </div>
    <!-- #end page-wrap -->
</div>